<script setup lang="ts">
import {useRoute} from 'vue-router'
import {onMounted,ref} from "vue";
import api from "@/api";
import {showFailToast} from "vant";
import 'vant/lib/toast/style'

const dayNewList = ref([])
const weekTopList = ref([])

onMounted(()=>{
  dayNew()
  weekTop()
})

const dayNew = () => {
  api.postReq("/snack/dayNew").then(res=>{
    let result = res.data
    if(result.code == 1){
      dayNewList.value = result.data  // 注意这里 result.data
    }else{
      showFailToast(result.msg)
    }
  })
}
const weekTop = () => {
  api.postReq("/snack/weekTop").then(res=>{
    let result = res.data
    if(result.code == 1){
      weekTopList.value = result.data
    }else{
      showFailToast(result.msg)
    }
  })
}
</script>


<template>
  <div class="page">

    <!-- 每日上新 -->
    <h3 class="title">每日上新</h3>
    <div class="grid">
      <div class="item" v-for="item in dayNewList" :key="item.id">
        <img :src="item.coverImg" alt="" class="cover">
        <div class="name">{{ item.name }}</div>
        <div class="price">¥{{ item.price }}</div>
      </div>
    </div>

    <!-- 7天销量榜 -->
    <h3 class="title">7天销量榜</h3>
    <div class="tabs">
      <span class="tab active">全部</span>
      <span class="tab">时令果蔬</span>
      <span class="tab">地方特色</span>
      <span class="tab">早餐</span>
      <span class="tab">方便速食</span>
    </div>
    <div class="grid">
      <div class="item" v-for="item in weekTopList" :key="item.id">
        <img :src="item.coverImg" alt="" class="cover">
        <div class="name">{{ item.name }}</div>
        <div class="price">¥{{ item.price }}</div>
        <div class="sales">7天销量 {{ item.totalQuantity || 0 }}</div>
      </div>
    </div>

  </div>
</template>


<style scoped>
.page {
  padding: 12px;
}
.title {
  font-size: 18px;
  font-weight: 600;
  margin: 12px 0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
}
.cover {
  width: 100%;
  height: 100px;
  object-fit: cover;
}
.name {
  font-size: 14px;
  color: #333;
  padding: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.price {
  color: #f44;
  font-size: 14px;
  padding-bottom: 4px;
}
.sales {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}
.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 12px;
}
.tab {
  padding: 4px 10px;
  background: #f5f5f5;
  border-radius: 12px;
  font-size: 12px;
  flex-shrink: 0;
}
.tab.active {
  background: #ffebe6;
  color: #f44;
}
</style>
